//选择异常
import { CommonForm } from "@/pages/OrderModule/common/components/CommonForm";
import { CommonModal } from "@/pages/OrderModule/common/components/CommonModal";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import Typography from "@/pages/OrderModule/common/components/Typography";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import { Button, Col, Form, message, Radio, Row, Space } from "antd";
import ErrorTypeManageModal from "@/views/components/ErrorTypeManage";
import CommonLoading from "@/components/CommonLoading";
import { useEffect, useState } from "react";
import { getErrorReasonOp } from "../../service";
import { find } from "lodash";

function ErrorTypeRadioGroup(props) {
	const { options, ...args } = props;
	return (
		<Radio.Group {...args}>
			<Row>
				{options.map(item => {
					return (
						<Col style={{ marginTop: 12 }} key={item.id} span={8}>
							<Radio value={item.id}>{item.name}</Radio>
						</Col>
					);
				})}
			</Row>
		</Radio.Group>
	);
}

/** 选择异常 **/
function SelectErrorModal(props) {
	const { item = {}, handleOk, handleCancel } = props;
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);
	const [errorList, setErrorList] = useState([]);
	const [openError, setOpenError] = useState(false);

	const { id } = item;

	useEffect(() => {
		getErrorReason();
	}, []);

	useEffect(() => {
		if (errorList.length) {
			form.resetFields();
		}
	}, [errorList]);

	//获取异常原因
	const getErrorReason = async () => {
		const { success, data } = await getErrorReasonOp();
		if (success) {
			setErrorList(data);
		}
	};

	const onOk = () => {
		const formData = form.getFieldsValue();
		if (!formData.errorId) {
			message.info("请选择异常原因");
			return;
		}
		const item = find(errorList, ["id", formData.errorId]);
		handleOk(item);
	};

	const onCancel = () => {
		handleCancel();
	};

	const ErrorTypeManageProps = {
		handleOk() {
			setOpenError(false);
			getErrorReason();
		},
		handleCancel() {
			setOpenError(false);
		}
	};

	return (
		<>
			{openError && <ErrorTypeManageModal {...ErrorTypeManageProps} />}
			<CommonModal
				title={{ title: "请选择异常类型" }}
				open={true}
				width="720px"
				onCancel={onCancel}
				footer={
					<Row justify="space-between">
						<Col>
							<Button type="link" onClick={() => setOpenError(true)}>
								<Typography color="#0068FF">
									<ExclamationCircleOutlined />
								</Typography>
								&nbsp;&nbsp;<Typography color="#333">维护自定义异常</Typography>
							</Button>
						</Col>
						<Col>
							<Space>
								<Button size="middle" onClick={onCancel}>
									取消
								</Button>
								<Button size="middle" type="primary" onClick={onOk}>
									确定
								</Button>
							</Space>
						</Col>
					</Row>
				}
			>
				<SubTitle symbol title="异常原因" as="s2" wrapStyle={{ marginTop: 16 }} />
				<CommonForm
					formProps={{
						form,
						initialValues: {
							errorId: id
						}
					}}
					columns={[
						{
							name: "errorId",
							slot: <ErrorTypeRadioGroup options={errorList} />
						}
					]}
				></CommonForm>
				<CommonLoading loading={loading} />
			</CommonModal>
		</>
	);
}

export default SelectErrorModal;
